%%{init: {'themeVariables': { 'fontSize': '12px'}}}%%
flowchart TD
    classDef path fill:#eee,stroke:#000,color:#000
    classDef plan fill:#fff,stroke-width:1px,color:#000
    classDef itemplan fill:#fff,stroke-width:2px,color:#000
    classDef unbatchedplan fill:#dff,stroke-width:1px,color:#000
    classDef sideeffectplan fill:#fcc,stroke-width:2px,color:#000
    classDef bucket fill:#f6f6f6,color:#000,stroke-width:2px,text-align:left


    %% plan dependencies
    Access6{{"Access[6∈0] ➊<br />ᐸ2.currentUserIdᐳ"}}:::plan
    __Value2["__Value[2∈0] ➊<br />ᐸcontextᐳ"]:::plan
    __Value2 --> Access6
    Load7[["Load[7∈0] ➊<br />ᐸuserByIdᐳ"]]:::plan
    Access6 --> Load7
    Load10[["Load[10∈0] ➊<br />ᐸfriendshipsByUserIdᐳ"]]:::plan
    Access6 --> Load10
    __Value4["__Value[4∈0] ➊<br />ᐸrootValueᐳ"]:::plan
    __Item14[/"__Item[14∈3]<br />ᐸ10ᐳ"\]:::itemplan
    Load10 ==> __Item14
    Access16{{"Access[16∈3]<br />ᐸ14.friend_idᐳ"}}:::plan
    __Item14 --> Access16
    Load17[["Load[17∈3]<br />ᐸuserByIdᐳ"]]:::plan
    Access16 --> Load17

    %% define steps

    Bucket0("Bucket 0 (root)<br /><br />1: <br />ᐳ: Access[6]<br />2: Load[7], Load[10]"):::bucket
    classDef bucket0 stroke:#696969
    class Bucket0,__Value2,__Value4,Access6,Load7,Load10 bucket0
    Bucket1("Bucket 1 (nullableBoundary)<br />Deps: 7, 10<br /><br />ROOT LoadᐸuserByIdᐳ[7]"):::bucket
    classDef bucket1 stroke:#00bfff
    class Bucket1 bucket1
    Bucket3("Bucket 3 (listItem)<br /><br />ROOT __Item{3}ᐸ10ᐳ[14]<br />1: <br />ᐳ: Access[16]<br />2: Load[17]"):::bucket
    classDef bucket3 stroke:#ffa500
    class Bucket3,__Item14,Access16,Load17 bucket3
    Bucket4("Bucket 4 (nullableBoundary)<br />Deps: 17<br /><br />ROOT Load{3}ᐸuserByIdᐳ[17]"):::bucket
    classDef bucket4 stroke:#0000ff
    class Bucket4 bucket4
    Bucket0 --> Bucket1
    Bucket1 --> Bucket3
    Bucket3 --> Bucket4